<script setup lang='ts'>
defineOptions({ name: 'AppSportsAmountInput' })
</script>

<template>
  <div class="sports-amount-input">
    <div class="cursor-text flex overflow-hidden items-center leading-[1] whitespace-nowrap pl-[8px]">
      <div class="flex-1 inline-flex overflow-visible min-w-0 items-center justify-end">
        <input placeholder="0" inputmode="decimal" type="tel" pattern="\d*">
        <span class="ml-[4px] mr-[8px]">$</span>
      </div>
    </div>
  </div>
</template>

<style>
:root {
  --bc-sports-amount-input-height: 22px;
}
</style>

<style lang='scss' scoped>
.sports-amount-input {
  background: var(--color-bg-black-0);
  border: 1px solid transparent;
  border-color: var(--color-bg-black-0);
  border-radius: 6px;
  color: var(--color-text-white-0);
  font-size: 16px;
  font-weight: 500;

  input {
    height: var(--bc-sports-amount-input-height);
    width: 100%;
    border: 1px solid transparent;
    display: inline-block;
    outline: none;
    padding: 0;
    min-width: 1px;
    background: inherit;
    box-shadow: none;
    border-radius: 6px;
    -webkit-appearance: none;
    text-align: right;
  }
}
</style>
